<template>
  <div id="app">
    <div class="login">
      <div class="loginfrom">
               <img src="./02.png" alt="">
<el-form :model="from" ref="loginRef" :rules="rules" label-position="left" auto-complete="on" >
  <el-form-item prop="loginName">
    <el-input type="text" v-model="from.loginName" prefix-icon="el-icon-mobile-phone"></el-input>
  </el-form-item>
  <el-form-item prop="password">
    <el-input v-model="from.password" type="password" prefix-icon="el-icon-lock" class="pass"></el-input>
    <span class="show-pwd">
    </span>
  </el-form-item>
  <el-form-item prop="code" class="item">
    <el-input v-model="from.code" style="width:75%" prefix-icon="iconfont icon-yanzhengyanzhengma" ></el-input>
    <div class="butt">
     <img :src="srcss" alt="" @click="replac">
    </div>
  </el-form-item>
  <el-button type="primary"  :loading="loading" style="width:100%" @click="btn">登录</el-button>
</el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { userservice, login } from '@/api'
export default {
  data () {
    return {
      passwordType: 'password',
      loading: false,
      num: null,
      userId: '',
      srcss: '', // 验证码图片
      from: {
        loginName: 'admin',
        password: 'admin',
        code: '',
        clientToken: '',
        loginType: 0
      },
      rules: {
        loginName: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          { min: 1, max: 20, message: '请输入正确的账号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 1, max: 18, message: '请输入6-10位密码', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
          { patten: /^\d{4}$/, message: '请输入正确的验证码位数', trigger: 'blur' }
        ]
      }
    }
  },
  async created () {
    this.replac()
    this.codes()
  },
  methods: {
    async  codes () {
      const res = await userservice({ clientToken: this.num })
      this.srcss = res.request.responseURL
      // console.log(this.srcss)
    },
    // 点击眼睛
    flags () {

      // console.log(1)
    },
    // 验证码切换
    replac () {
      this.num = Math.ceil(Math.random() * 10)
      // console.log(num)
      this.from.clientToken = this.num
      this.codes()
    },
    // 登录
    btn () {
      this.$refs.loginRef.validate(async (valid) => {
        if (!valid) return
        this.loading = true
        const { data: res } = await login(this.from)
        this.userId = res.userId
        if (res.success) {
          this.$message.success({ message: res.msg })
          await this.$store.dispatch('logins', this.from)
          this.loading = false
          this.$router.push('/home')
        } else {
          this.loading = false
          this.$message.error(res.msg)
          // 验证码输入错误，自动刷新
          this.codes()
          this.replac()
        }
      })
    }
  }

}

</script>

<style lang='less'>

  .login{
   background-image: url('./01.png');
overflow: hidden;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
   .loginfrom{
       position: relative;
    width: 518px;
    height: 388px;
    padding: 76px 35px 0;
    background: #fff;
    border-radius: 10px;
    img{
    position: absolute;
    width: 96px;
    height: 96px;
    top: -46px;
    left: 50%;
    margin-left: -48px;
    }
    .item{
    position: relative;
      .butt{
        width: 30%;
    position: absolute;
    top: -0px;
          left: 70%;
    img{
       width: 85%;
          height: 40px;
             position: absolute;
    top: -0px;
          // left: 55%;
          }
      }
    }
 .show-pwd {
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 16px;
    cursor: pointer;
    user-select: none;
  }

   }

  }

</style>
